import React, { useState, useRef, useEffect } from 'react';
import { FaFolder } from 'react-icons/fa6';
import { Dialog, Button, Input } from '../common';

const NewProjectDialog = ({ 
  isOpen, 
  onClose,
  onConfirm
}) => {
  const [projectName, setProjectName] = useState('新的作品');
  const inputRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      setProjectName('新的作品');
    }
  }, [isOpen]);

  const handleConfirm = () => {
    if (projectName.trim()) {
      onConfirm(projectName.trim());
      onClose();
    }
  };

  const handleCancel = () => {
    onClose();
  };

  return (
    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      title="新建作品"
      size="small"
      footer={
        <>
          <Button
            variant="secondary"
            onClick={handleCancel}
          >
            取消
          </Button>
          <Button
            variant="primary"
            onClick={handleConfirm}
            disabled={!projectName.trim()}
          >
            确认创建
          </Button>
        </>
      }
    >
      <Input
        ref={inputRef}
        value={projectName}
        onChange={(e) => setProjectName(e.target.value)}
        placeholder="请输入作品名称"
        label="作品名称"
        maxLength={50}
        autoFocus
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            handleConfirm();
          }
        }}
      />
      
      <p style={{ 
        marginTop: '16px', 
        fontSize: '13px', 
        color: 'var(--color-text-secondary)',
        lineHeight: '1.4'
      }}>
        💡 提示：新建作品将替换当前项目，请确保已保存重要内容。
      </p>
    </Dialog>
  );
};

export default NewProjectDialog;
